<template>
  <div>
    <div id="product-info">
      <el-page-header @back="goBack">
      </el-page-header>
      <div class="left">
        <div class="product-introduce">
          <div class="view-list">
            <div class="list" v-for="index in 4" :key="index">
              <img :src="require('/src/assets/images/girl02.jpg')" alt="">
            </div>
          </div>
          <div class="current-product-img">
            <img :src="this.product.picUrl" alt="">
          </div>
        </div>
        <div class="explain">
          <div class="product-explain">
            <el-collapse v-model="activeNames" @change="handleChange">
              <el-collapse-item title="商品说明" name="1">
                <div class="content">
                  <ul>
                    <li>
                      *因货品批次不同，部分价格可能出现吊牌价不一致，请以到手价为准，敬请谅解。您的购买即默认接受此说明。
                    </li>
                    <li>
                      松紧腰
                    </li>
                    <li>
                      抽绳设计
                    </li>
                    <li>
                      可调节腰身大小
                    </li>
                    <li>
                      小巧字母徽标
                    </li>
                    <li>
                      柔软棉质面料
                    </li>
                    <li>
                      机洗
                    </li>
                  </ul>
                </div>
              </el-collapse-item>
            </el-collapse>

          </div>
        </div>
      </div>
      <div class="right">
        <!--        标题-->
        <div class="title-and-category">
          <span class="category">
            女装
          </span>|
          <span class="title">
            {{this.product.productName}}
          </span>
        </div>
        <!--        活动-->
        <div class="event">
          <div class="introduce">
            活动
          </div>
          <div class="event-list">
            <ul>
              <li>
                · 热销爆款3件折上7折，2件折上8折
              </li>
              <li>
                · 单笔实付满499元赠Gap House拼装积木，随单赠，限600个（赠完即止）
              </li>
              <li>
                · 6/16-6/20期间，全场限时免邮
              </li>
            </ul>
          </div>
        </div>
        <!--        价格-->
        <div class="price">
          <span>￥{{ this.product.price }}</span>
        </div>
        <!--        颜色-->
        <div class="color">
          <div class="title">
            <span>颜色：</span>
            <span class="color-introduce" v-text="this.product.colors[currentColor]">
              海军蓝色
            </span>
          </div>
          <div class="color-list">
            <ul>
              <li @click="changeColor(index)"
                  :class="index === currentColor ? 'isActive' : ''" v-for="(color, index) in this.product.colors" :key="index">
                <img :src="require('/src/assets/images/girl02.jpg')" alt="">
              </li>
            </ul>
          </div>
        </div>
        <!--        尺寸-->
        <div class="size">
          <div class="size-title">
            <span>尺寸：</span>
            <span class="size-introduce" v-text="this.product.size[currentSize]">
              160/64A(XXS)
            </span>
          </div>
          <div class="size-list">
            <ul>
              <li v-for="(productSize, index) in product.size"
                  @click="changeSize(index)"
                  :class="index === currentSize ? 'isActive' : ''"
                  :key="index"
                  v-text="productSize">160/64A(XXS)</li>
            </ul>
          </div>
        </div>
        <!--        数量-->
        <div class="number">
          <div class="title">
            <span>数量：</span>
            <span class="number-introduce" v-text="form.number"></span>
          </div>
          <div class="number-sub-or-add">
            <span class="sub" @click="form.number--">-</span>
            <span class="number" v-text="form.number"></span>
            <span class="add" @click="form.number++">+</span>
          </div>
        </div>
        <!--        加入购物车-->
        <div class="buy">
          <div class="add-to-cart" @click="addToCart">
            加入购物车
          </div>
          <div class="buy-now isActive" @click="buyNow">
            立即购买
          </div>
        </div>
      </div>
      <div class="product-detail">
        <div class="title">商品详情</div>
        <div class="detail-list">
          <el-image v-for="(detail, key) in this.product.detail" :key="key" :src="detail"></el-image>
        </div>
      </div>
    </div>
  </div>
</template>
<!--商品详情页-->
<script>
import { getProductById, addToCart } from '../../api'

export default {
  name: 'productDetail',
  props: ['id'],
  data () {
    return {
      product: {
        brandId: 1,
        descript: '',
        isMaster: 1,
        picDesc: '',
        picOrder: 1,
        picStatus: 1,
        picUrl: '',
        price: 99.9,
        productId: 1,
        productName: '',
        saleCount: 100,
        supplierId: 1,
        detail: [],
        size: ['160/64A(XXS)', '160/68A(XS)', '160/70A(XS)', '165/76A(M)', '170/80A(L)', '170/92A(XL)'],
        colors: ['海军蓝色', '棕色', '黑色']
      },
      form: {
        productId: 0,
        color: '海军蓝色',
        size: '',
        number: 1,
        price: 0
      },
      currentColor: 1,
      currentSize: 0,
      activeNames: ['1']
    }
  },
  methods: {
    initProduct () {
      // 根据商品id获取到商品详情
      getProductById(this.id).then(({ data }) => {
        if (data.code === 0) {
          this.product = data.productVo
          this.product.size = ['160/64A(XXS)', '160/68A(XS)', '160/70A(XS)', '165/76A(M)', '170/80A(L)', '170/92A(XL)']
          this.product.colors = ['海军蓝色', '棕色', '黑色']
        } else {
          this.$message.error(data.msg)
          this.$router.push({ path: '/hot' })
        }
      }).catch(res => {
        console.log(res)
      })
    },
    // 添加到购物车
    addToCart () {
      this.form.productId = this.product.productId
      this.form.color = this.product.colors[this.currentColor]
      this.form.size = this.product.size[this.currentSize]
      this.form.price = this.product.price
      addToCart(this.form).then(({ data }) => {
        console.log(data)
      }).catch(res => {
        console.log(res)
      })
    },
    // 立即购买
    buyNow () {
      console.log('立即购买')
    },
    // 改变颜色
    changeColor (index) {
      this.currentColor = index
    },
    changeSize (index) {
      this.currentSize = index
    },
    goBack () {
      this.$router.go(-1)
    },
    // 折叠面板改变时调用
    handleChange (val) {
      console.log(val)
    }
  },
  created () {
    this.initProduct()
  }
}
</script>

<style scoped lang="less">
#product-info {
  width: 980px;
  margin: 0 auto;
  box-sizing: border-box;

  .left {
    width: 50%;
    height: 100%;
    box-sizing: border-box;
    float: left;
    padding: 10px;

    .product-introduce {
      display: flex;
      justify-content: space-between;

      .view-list {
        .list {
          img {
            width: 91px;
            height: 117px;
            border-radius: 4px;
          }
        }
      }

      .current-product-img {
        img {
          width: 348px;
          height: 480px;
          border-radius: 4px;
        }
      }
    }
    .explain{
      margin-top: 30px;
      .product-explain{
        border-top: 1px solid #cccccc;
        .title{
          padding-top: 20px;
          font-size: 14px;
          color: #333;
          line-height: 14px;
          text-align: left;
          font-weight: bold;
          .operation{
            cursor: pointer;
          }
        }
        .content{
          width: 100%;
          ul{
            list-style: none;
            li{
              font-size: 12px;
              font-weight: 400;
              text-align: left;
              line-height: 19px;
            }
          }
        }
      }
    }
  }

  .right {
    width: 50%;
    height: 100%;
    float: left;
    padding: 10px;
    box-sizing: border-box;
    text-align: left;

    .title-and-category {
      font-weight: bold;
      padding-top: 7px;
    }

    .event {
      width: 100%;
      height: 100px;
      margin-top: 24px;
      border-left: 2px solid #be200a;
      background-color: #f9f9f9;

      .introduce {
        float: left;
        width: 10%;
        height: 100px;
        padding: 5px;
        box-sizing: border-box;
        color: #be200a;
        font-size: 12px;
      }

      .event-list {
        width: 90%;
        height: 100%;
        float: left;
        box-sizing: border-box;

        ul {
          padding-left: 10px;

          li {
            display: block;
            line-height: 17px;
            margin-bottom: 6px;
            font-size: 12px;
          }
        }
      }
    }

    .price {
      margin-top: 24px;
      span {
        font-size: 24px;
        line-height: 24px;
        font-weight: bold;
        color: #be200a;
      }
    }

    .color {
      margin-top: 24px;

      .title {
        width: 100%;
        height: 17px;

        span {
          color: #999;
          font-size: 14px;
          line-height: 14px;
        }

        .color-introduce {
          color: #333;
          font-weight: bold;
        }
      }

      .color-list {
        ul {
          display: flex;
          justify-content: left;
          list-style: none;
          padding-left: 0;

          li {
            margin-right: 20px;
            box-sizing: border-box;
            cursor: pointer;

            &.isActive {
              border: 1px solid red;
            }

            img {
              width: 26px;
            }
          }
        }
      }
    }

    .size {
      .size-title {
        margin-top: 27px;

        span {
          color: #999999;
          font-size: 14px;
          line-height: 14px;
        }

        .size-introduce {
          color: #333333;
          font-weight: bold;
        }
      }

      .size-list {
        ul {
          list-style: none;
          width: 100%;
          height: 100px;
          padding-left: 0px;
          margin-top: 5px;

          li {
            float: left;
            width: 30%;
            height: 40px;
            margin-right: 15px;
            border: 1px solid #d9d9d9;
            border-radius: 2px;
            line-height: 40px;
            text-align: center;
            box-sizing: border-box;
            margin-top: 10px;
            cursor: pointer;

            &.isActive {
              border: 1px solid #042f6a;
            }
          }
        }
      }
    }

    .number {
      .title {
        span {
          color: #999999;
          font-size: 14px;
          line-height: 14px;
        }

        .number-introduce {
          color: #333333;
          font-weight: bold;
        }
      }

      .number-sub-or-add {
        display: flex;
        justify-content: left;
        margin-top: 20px;

        span {
          width: 32px;
          height: 32px;
          box-sizing: border-box;
          display: block;
          border: 1px solid #d9d9d9;
          cursor: pointer;
          text-align: center;
          line-height: 32px;
          border-radius: 2px;
        }
      }
    }

    .buy {
      display: flex;
      justify-content: space-between;
      margin-top: 60px;

      div {
        width: 40%;
        height: 40px;
        text-align: center;
        line-height: 40px;
        border: 1px solid #122147;
        color: #122147;
        cursor: pointer;
        border-radius: 2px;

        &.isActive {
          background-color: #042f6a;
          color: #FFFFFF;
        }
      }
    }
  }

  .product-detail{
    float: left;
    margin-top: 50px;
    width: 100%;
    .title{
      font-size: 24px;
      font-weight: 400;
      margin-bottom: 20px;
    }
    .detail-list{
      width: 90%;
      margin: 0 auto;
      .el-image{
        width: 100%;
        img{
          width: 100%;
        }
      }
    }
  }
}
</style>
